<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="header"><span class="header-s">本店货架</span></view>
		<view class="seach">
			<view class="seach-s" @confirm="confirm">
				<image src="../../static/images/tb_search.png" mode="" @confirm="confirm"></image>
				<input type="text" value="" placeholder="请输入关键词..." v-model="name" @confirm="confirm" confirm-type="search" />
			</view>
			<view class="seach-e" v-model="name"><image src="../../static/slice/sys.png" mode="" @click="scan()"></image></view>
		</view>
		<view class="classify">
			<view class="classify-l" @click="showSort">
				{{ sortName == '' ? '全部分类' : sortName }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
			<view class="classify-l" @tap="showShelf">
				{{ shelfName == '' ? '全部' : shelfName }}
				<image src="../../static/slice/1.png" mode=""></image>
			</view>
			<view class="classify-l" @tap="showSmart">
				{{ smartName == '' ? '智能排序' : smartName }}

				<image src="../../static/slice/1.png" mode=""></image>
			</view>
		</view>
		<!-- 分类下拉 -->
		<view class="combobox" :class="sortClass" @tap="hideSort">
			<view class="content">
				<view class="show-li" :class="itemIndex == index ? 'active' : ''" v-for="(item, index) in categoryList" :key="index" @tap="selectSort(item.name, index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<!-- 货架下拉 -->
		<view class="combobox" :class="shelfClass" @tap="hideShelf">
			<view class="content">
				<view
					class="show-li"
					:class="itemIndex == index ? 'active' : ''"
					v-for="(item, index) in shelfList"
					:key="index"
					@tap="selectShelf(index, item.name, item.type, item.status)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 	排序下拉 -->

		<view class="combobox" :class="smartClass" @tap="hideSmart">
			<view class="content">
				<view class="show-li" :class="itemIndex == index ? 'active' : ''" v-for="(item, index) in smartList" :key="index" @tap="selectSmart(index, item.name, item.type)">
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 商品列表-->

		<view class="commodity" v-for="(item, index) in sortList" :key="index" @tap="goDetail(item.goods_id)">
			<view class="commodity-top">
				<view style="font-size: 30rpx; color: #333333;">编码: {{ item.goods_no }}</view>
				<view class="commodity-child">上架日期: {{ item.create_time | birtime }}</view>
			</view>
			<view class="commodity-bo">
				<view class="pic"><dimg :src="item.cover"></dimg></view>
				<view class="commodity-m">
					<view class="f32 c333">{{ item.title }}</view>
					<view class="f28 c333">库存: {{ kucun(item) }}</view>
					<view class="f28 c333">销量: {{ xiao(item) }}</view>
				</view>
				<view class="commodity-r">
					<view class="" style="color: #F64444;">¥{{ item.max_price }}</view>
					<view class="f26" style="color:#249def ;">微信推广</view>
				</view>
			</view>
		</view>
		<!-- 暂无数据 -->
		<view class="ima" v-if="sortList.length == 0"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode="aspectFit"></image></view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';

export default {
	components: {
		uniIcons
	},
	data() {
		return {
			sortClass: '', //全部分类css
			shelfClass: '', //货架css
			smartClass: '', // 排序css
			sortName: '',
			shelfName: '',
			smartName: '',
			type: '', //是否隐藏价格  0  不隐藏  1 隐藏
			status: '', //状态 0 下架 1 上架
			showtru: true,
			categoryList: [],
			goodsList: [],
			price: '', //价格
			itemIndex: '',
			correctImg: '',
			sortList: [],
			name: '', //搜索名
			time: 1587094352,
			shelfList: [
				{
					name: '全部',	
					status: null
				},
				{
					name: '已上架',
					status: 1
				},
				{
					name: '已下架',
					status: 0
				},
				{
					name: '未隐藏价格',
					type: 0
				},
				{
					name: '已隐藏价格',
					type: 1
				}
			],
			smartList: [
				{
					name: '上架时间(最近)',
					type: 0
				},
				{
					name: '上架时间(最早)',
					type: 1
				},
				{
					name: '更新时间(最近)',
					type: 2
				},
				{
					name: '更新时间(最早)',
					type: 3
				}
				// {
				// 	name: '销售从高到低'
				// },
				// {
				// 	name: '销售从低到高'
				// },
				// {
				// 	name: '库存从低到高'
				// },
				// {
				// 	name: '库存从低到高'
				// }
			]
		};
	},
	onLoad() {
		// this.getGoodsList();
		this.getCategoryList();
		// this.time=new Date
	},
	onShow() {
		this.getGoodsList();
	},
	onPullDownRefresh() {
this.fn();
		setTimeout(function() {
			uni.stopPullDownRefresh();
			
				console.log(123);
		}, 1000);

	},
	watch: {
		name(newValue, oldValue) {
			this.sortList = this.goodsList;
			this.name = newValue;
			this.sortList = this.sortList.filter(item => {
				return item.title.indexOf(this.name) != -1;
			});
		}
	},
	methods: {
		// 货架分类列表
		getCategoryList() {
			let that = this;
			that.$ajax('api/v1.goods/categoryList', {}, 'GET')
				.then(res => {
					if (res.code == 1) {
						that.categoryList = res.result;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		//商品列表
		getGoodsList() {
			let that = this;
			that.$ajax('api/v2.goods/index')
				.then(res => {
					if (res.code == 1) {
						that.sortList = that.goodsList = res.result;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},

		//全部分类
		showSort() {
			this.sortClass = 'show';
			this.shelfClass = 'hide';
			this.smartClass = 'hide';
		},
		hideSort() {
			this.sortClass = 'hide';
		},

		//货架分类
		showShelf() {
			this.shelfClass = 'show';
			this.sortClass = 'hide';
			this.smartClass = 'hide';
		},
		hideShelf() {
			this.shelfClass = 'hide';
		},

		//排序分类
		showSmart() {
			this.smartClass = 'show';
			this.sortClass = 'hide';
			this.shelfClass = 'hide';
		},
		hideSmart() {
			this.smartClass = 'hide';
		},
		fn(){
		this.getGoodsList();
		
		},
		selectSort(name, index) {
			this.sortName = name;
			this.itemIndex = index;
			this.sortList = this.goodsList.filter(item => {
				return item.category_name == name;
			});
			console.log(this.sortList);
		},
		selectShelf(index, name, type, status) {
			this.itemIndex = index;
			this.shelfName = name;
			this.type = type;
			this.status = status;
			if (this.type == 0) {
				this.shelfName = '未隐藏价格';
				this.sortList = this.goodsList.filter(item => {
					return item.is_hidden_price == 0;
				});
			}
			if (this.type == 1) {
				this.shelfName = '已隐藏价格';
				this.sortList = this.goodsList.filter(item => {
					return item.is_hidden_price == 1;
				});
			}
			if (this.status == null) {
				this.shelfName = '全部';
				this.sortList = this.goodsList.filter(item => {
				return item.status 
		});
			}
			if (this.status == 0) {
				this.shelfName = '下架';
				this.sortList = this.goodsList.filter(item => {
					return item.status == 0;
				});
			}
			if (this.status == 1) {
				this.shelfName = '上架';
				this.sortList = this.goodsList.filter(item => {
					return item.status == 1;
				});
			}
		},
		selectSmart(index, name, type) {
			this.itemIndex = index;
			this.smartName = name;
			this.type = type;

			if (this.type == 0) {
				this.smartName = '上架时间(最近)';
				function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value2 - value1; // value1-value2是从小到大    如果是从大到小 return value2 -value1
					};
				}
				this.sortList.sort(compare('create_time'));
			}
			if (this.type == 1) {
				this.smartName = '上架时间(最早)';
				function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value1 - value2; // value1-value2是从小到大    如果是从大到小 return value2 -value1
					};
				}
				this.sortList.sort(compare('create_time'));
			}
			if (this.type == 2) {
				this.smartName = '更新时间(最近)';
				function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value2 - value1; // value1-value2是从小到大    如果是从大到小 return value2 -value1
					};
				}
				this.sortList.sort(compare('update_time'));
			}
			if (this.type == 3) {
				this.smartName = '更新时间(最早)';
				function compare(property) {
					return function(a, b) {
						var value1 = a[property];
						var value2 = b[property];
						return value1 - value2; // value1-value2是从小到大    如果是从大到小 return value2 -value1
					};
				}
				this.sortList.sort(compare('update_time'));
			}
		},
		kucun(e) {
			let c = 0;
			// console.log(e);

			e.product_list.forEach(item => {
				c = +item.store_num + c;
			});
			return c;
		},
		xiao(e) {
			let c = 0;
			// console.log(e);

			e.product_list.forEach(item => {
				c = +item.sale_num + c;
			});
			return c;
		},
		confirm: function() {
			this.sortList = this.goodsList.filter(item => {
				return item.title == this.name;
			});
		},
		// 调起扫码搜索
		scan() {
			let that = this;
			uni.scanCode({
				success: function(res) {
					console.log(res.result);

					// console.log(this.pict);
					that.sortList = that.goodsList;
					// this.pict=newValue
					that.sortList = that.sortList.filter(item => {
						return item.goods_no == res.result;
					});
					// console.log(123);
				}
			});
		},

		goDetail(id) {
			uni.navigateTo({
				url: '../shopMall/descriptionOfCommodity?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.header {
	width: 100%;
	background-color: #249af6;
	padding: 55upx 0 30upx 0;
	text-align: center;
	.header-s {
		width: 143rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 48rpx;
	}
}
.seach {
	width: 750rpx;
	background-color: #249af6;
	margin: auto;
	display: flex;
	flex: 1;
	justify-content: center;
	padding-bottom: 25upx;

	.seach-s {
		width: 613rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28upx;
		color: #999;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		padding-left: 27rpx;
		display: flex;
		box-sizing: border-box;
		input {
			padding-top: 10rpx;
			border-style: none;
			font-size: 28upx;
			color: #999;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 6rpx;
			margin-left: 26rpx;
		}
	}
}
.classify {
	display: flex;
	justify-content: space-around;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	background-color: #ffffff;
	height: 90rpx;
	line-height: 90rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 11rpx;
	}
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
	image {
		width: 370upx;
		height: 390upx;
	}
}

.combobox {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 290upx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2;
	display: none;
	.content {
		width: 100%;
		background-color: #ffffff;
		height: 600upx;
		overflow-y: scroll;
		.show-li {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 2rpx solid #eeeeee;
			padding: 0 40rpx 0 30upx;
			&.active {
				color: #249af6;
				background: url('../../static/slice/gou.png') no-repeat right 40upx center;
				background-size: 38upx 32upx;
			}
		}
	}
}

.showtrue {
	display: none;
}
.commodity {
	width: 100%;
	overflow: hidden;
	margin-top: 27rpx;
	margin-bottom: 20upx;

	.commodity-top {
		background-color: #ffffff;
		height: 91rpx;
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		.commodity-child {
			font-size: 26rpx;
			color: #999;
		}
	}
	.commodity-bo {
		width: 100%;
		height: 100%;
		display: flex;
		padding: 0 30upx 40upx 30upx;
		overflow: hidden;
		background-color: $white-background;
		box-sizing: border-box;
		margin-bottom: 20upx;
		.pic {
			width: 150upx;
			height: 150upx;
			margin-right: 30rpx;
		}
		.commodity-m {
			line-height: 50rpx;
			width: 50%;
		}

		.commodity-r {
			width: 30%;
			line-height: 78rpx;
			text-align: right;
		}
	}
}

.show {
	display: block;
}
.hide {
	display: none;
}
</style>
